<!--  -->
<template>
    <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
        <el-input v-model="codeText"></el-input>
        <!-- <vue-qr 
              id="payQR" 
              v-if="codeText" 
              :text="codeText" 
              :size="248" 
              colorDark="#5559FF" 
              colorLight="#ffffff"
              :callback="getImgInfo">
          </vue-qr> -->
        <vue-qrcode id="qrCode" v-if="codeText" :value="codeText" :options="{ width: 300 }"></vue-qrcode>
        <el-button @click="submit">提交</el-button>

        <el-button @click="post">防抖</el-button>
    </el-dialog>
</template>

<script lang='ts' setup>
import VueQrcode from '@chenfengyuan/vue-qrcode';
import { reactive, toRefs, ref, defineEmits } from 'vue'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
//https://devpress.csdn.net/vue/66cd7ee18f4f502e1cfe4377.html
import { upload } from '../../api/file/file'
import {debounce} from '../../utils/debounce'
const codeText = ref("");

const uploadImg=async ()=>{

    let canvas: any = document.getElementById('qrCode');
    let dataURL = canvas.toDataURL('image/png'); //canvas转成base64
    const uploadRes = await upload(dataURL);
    console.log(uploadRes.url);

}

const post=debounce(()=>{

    console.log("防抖");
    

})

watch(codeText,debounce(uploadImg,1000))



const emits = defineEmits(["close"])

const base64 = ref("");
const getImgInfo = (data: string) => {

    base64.value = data;

}
const dialogVisible = ref(true);
const handleClose = () => {
    emits("close")
}


const submit = async () => {

    let canvas: any = document.getElementById('qrCode');
    let dataURL = canvas.toDataURL('image/png'); //canvas转成base64

    console.log(1233, dataURL);
    const uploadRes = await upload(dataURL);

    //  const uploadRes=await upload(base64.value);

    console.log(uploadRes.url);




}
</script>
<style scoped></style>